<template id="Album">
  <div class="album" ref="Album">
    <div class="pc">
      <div class="options">
        <div class="bottonGroup">
          <div class="pcButton" v-for="(item, index) in productsButtonList" :key="index" @click="selectProducts(item)"
            :class="{ isClick: item.id == pcTop }">
            <span> {{ item.name }}</span>
          </div>
        </div>
        <div class="selectGroup">
          <div class="selectItem">
            <div class="currentSelet" @click="openKindOption">
              <img :src="pcTypesIcon" class="pcTypesIcon" />
              <p class="currentName">{{ kindChose.name }}</p>
              <img :src="pcDropdownIcon" class="pcDropdownIcon" />
            </div>
            <div class="selectOptions" :class="[
              { isShow: isShowKind && !isKindInit },
              { isClose: !isShowKind && !isKindInit },
            ]">
              <div class="selectType" v-for="item in kindList" :key="item.id" @click="choseKind(item)">
                <p :class="{ isChoseText: kindChose.id == item.id }">
                  {{ item.name }}
                </p>
                <img :src="pcChoseIcon" class="pcChoseIcon" v-if="kindChose.id == item.id" />
              </div>
            </div>
          </div>
          <div class="selectItem">
            <div class="currentSelet" @click="openSelectOption">
              <img :src="pcTypesIcon" class="pcTypesIcon" />
              <p class="currentName">{{ currentChose.label }}</p>
              <img :src="pcDropdownIcon" class="pcDropdownIcon" />
            </div>
            <div class="selectOptions" :class="[
              { isShow: isShowType && !isInit },
              { isClose: !isShowType && !isInit },
            ]">
              <div class="selectType" v-for="item in typeList" :key="item.value" @click="choseType(item)">
                <p :class="{ isChoseText: currentChose.value == item.value }">
                  {{ item.label }}
                </p>
                <img :src="pcChoseIcon" class="pcChoseIcon" v-if="currentChose.value == item.value" />
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="count">
        当前展示<span>{{ productList.length }}</span>个结果
      </div>
      <div class="productsContent">
        <div class="productItem" v-for="(item, index) in productList" :key="index" @click="goToDetail(item)">
          <img class="productImage" :src="item.images.length > 0 ? item.image : defaultImage" />
          <div class="productDesc">
            <p class="productTitle">{{ item.name }}</p>
            <div class="folder">
              <img :src="folderIcon" @click.stop="goToDetail" />
              <p>{{ item.goods_num }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="pcPage" v-if="productList.length > 0">
        <el-pagination @current-change="changePage" :current-page="page.defaultPagination" :page-sizes="[8]"
          layout="total, sizes, prev, pager, next, jumper" :total="page.totalPages" popper-class="pagePopper">
        </el-pagination>
      </div>
    </div>
    <div class="phone">
      <div class="phoneSelect">
        <div class="tabSelect">
          <div class="tabTitle" v-for="(item, index) in phoneOptions" :key="index"
            :class="{ isSelect: phoneTop == item.id }" @click="phoneSelectTop(item)">
            <span>{{ item.name }}</span>
            <div class="backLine"></div>
          </div>
        </div>
      </div>
      <div class="phoneOption">
        <div class="phoneButton" v-for="(item, index) in phoneOptionBtns" :key="index" @click="choseKind(item)"
          :class="{ isClick: item.id == kindChose.id }">
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="phoneProducts" v-if="productList.length > 0">
        <div class="productGroup">
          <div class="productItem" v-for="(item, index) in productList" :key="index" @click.stop="goToDetail(item)">
            <div class="productImages">
              <img :src="item.images.length > 0 ? item.image : defaultImage" />
            </div>
            <div class="productDesc">
              <p class="productTitle">{{ item.name }}</p>
              <div class="productText">
                该专辑包含商品：{{ item.goods_num }}
              </div>
            </div>
          </div>
        </div>
        <div class="productEnd">没有更多专辑了哦~</div>
      </div>
    </div>
    <div class="noneTip" v-if="productList.length <= 0">
      <img :src="deafultImage" class="deafultImage" />
      <p>该分类下暂无任何专辑哦~</p>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { Pagination } from "@/components";
import { getGoodsCatesApi } from "@/api";
import { iscode, getWidth } from "@/utils";
import MescrollVue from "mescroll.js/mescroll.vue";
import { mapState } from "vuex";
export default {
  name: "Album",
  components: { Pagination, MescrollVue },
  props: {
    productList: {
      type: Array,
    },
    page: {
      type: Object,
    },
    sortList: {
      type: Array,
    },
    isShowSelect: {
      type: Boolean,
    },
  },
  // 定义属性
  data() {
    return {
      typeList: [
        {
          value: 1,
          label: "单品",
        },
        {
          value: 2,
          label: "专辑",
        },
      ],
      kindList: [{ id: "", name: "全部" }],
      currentChose: { value: 2, label: "专辑" },
      kindChose: { id: "", name: "全部" },
      isInit: true,
      isShowType: false,
      isShowKind: false,
      isKindInit: false,
      deafultImage: require("@/assets/images/mobile/default.png"),
      pcTypesIcon: require("@/assets/images/mail/types.png"),
      pcDropdownIcon: require("@/assets/images/mail/dropdown.png"),
      pcChoseIcon: require("@/assets/images/mail/chose.png"),
      folderIcon: require("@/assets/images/mail/folder.png"),
      selectUp: require("@/assets/images/product/selectUp.png"),
      rightIcon: require("@/assets/images/product/right.png"),
      defaultImage: require("@/assets/images/product/defaultImage.png"),
      typeValue: "",
      sortValue: "",
      sortName: "",
      currentWidth: "",
      isPhone: false,
      productsButtonList: [
        {
          id: 1,
          name: "精选",
        },
      ],
      phoneOptionBtns: [{
        image: require("@/assets/images/mail/mail_all.png"),
        id: "",
        name: "全部",
      },],
      phoneTop: 2,
      pcTop: 1,
      phoneOptions: [
        {
          id: 1, name: "单品"
        },
        {
          id: 2, name: "专辑"
        }
      ]
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    choseType(item) {
      this.currentChose = item;
      this.isShowType = false;
      if (item.value == 1) {
        this.$router.push("/mail");
      }
    },
    choseKind(item) {
      this.kindChose = item;
      this.isShowKind = false;
      this.$emit("changeKind", item.id);
    },
    openKindOption() {
      this.isShowType = false;
      this.isKindInit = false;
      this.isShowKind = !this.isShowKind;
    },
    openSelectOption() {
      this.isInit = false;
      this.isShowKind = false;
      this.isShowType = !this.isShowType;
    },
    //获取商品分类
    async getGoodsCates() {
      let result = await getGoodsCatesApi();
      if (iscode(result)) {
        this.kindList = this.kindList.concat(
          result.result.list
        );
        this.phoneOptionBtns = this.phoneOptionBtns.concat(
          result.result.list
        );
      }
    },
    changeSortName(val) {
      this.sortList.map((item, index) => {
        if (item.value == val) {
          this.sortName = item.text;
        }
      });
    },
    changePage(payload) {
      this.$emit("change", payload);
    },
    changeTypeValue() {
      this.$emit("changeType");
    },
    changeSortValue() {
      this.$emit("changeSort", this.sortValue);
    },

    goToDetail(item) {
      if (this.isPhone) {
        window.localStorage.setItem("shopPath", this.$route.path);
      }
      this.$router.push({
        path: "/mail/albumDetail",
        query: { id: item.id },
      });
    },
    changeTypeValueByPhone() {
      this.typeValue = 1;
      this.$emit("changeTypeByPhone", this.typeValue);
    },
    openSelect() {
      this.$emit("open");
    },
    selectSort(item) {
      this.sortValue = item.value;
      this.sortName = item.text;
      this.$emit("changeSortByPhone", this.sortValue);
    },
    selectProducts(item) {
      // this.$emit("clickPhoneType", item);
      this.pcTop = item.id
    },
    phoneSelectTop(item) {
      this.phoneTop = item.id
      if (item.id == 1) {
        this.changeTypeValueByPhone()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.currentWidth = getWidth();
    if (this.currentWidth <= 768) {
      this.isPhone = true;
    } else {
      this.isPhone = false;
    }
    let that = this;
    window.onresize = function () {
      if (that.$refs.Album) {
        that.currentWidth = getWidth();
        if (that.currentWidth <= 768) {
          that.isPhone = true;
        } else {
          that.isPhone = false;
        }
      }
    };
    this.getGoodsCates();
    this.changeSortName(this.sortValue);
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.album {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  p {
    margin-bottom: 0;
  }

  .pc {
    display: block;

    .options {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .bottonGroup {
        display: flex;
        align-items: center;

        .pcButton {
          background: rgba(255, 255, 255, 0.1) !important;
          margin: 0 10px 0 0;
          padding: 5.5px 13px;
          cursor: pointer;

          span {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #aaaaaa;
          }
        }

        .pcButton:last-child {
          margin: 0;
        }

        .isClick {
          background: #00ffb0 !important;

          span {
            font-weight: 600;
            color: #1c1e1e !important;
          }
        }
      }

      .selectGroup {
        display: flex;

        .selectItem {
          position: relative;
          margin-right: 30px;

          .currentSelet {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;

            .pcTypesIcon {
              width: 12px;
              height: 12px;
            }

            .currentName {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              margin: 0 6px;
            }

            .pcDropdownIcon {
              width: 9px;
              height: 5px;
            }
          }

          .selectOptions {
            position: absolute;
            top: 22px;
            right: 0;
            z-index: 9;
            width: 138px;
            background: #1e2020;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            padding: 10px 0;
            visibility: hidden;

            .selectType {
              // margin-top: 10px;
              height: 34px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 15px 10px;
              cursor: pointer;

              p {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8e8f8f;
              }

              .pcChoseIcon {
                width: 14px;
                height: 10px;
              }

              .isChoseText {
                color: #01f5ab;
              }
            }

            .selectType:hover {
              background: rgba(255, 255, 255, 0.03);
            }

            .selectType:first-child {
              margin-top: 0;
            }
          }

          .isShow {
            -webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;

            @-webkit-keyframes fade-in {
              0% {
                opacity: 0;
              }

              100% {
                opacity: 1;
              }
            }

            @keyframes fade-in {
              0% {
                opacity: 0;
              }

              100% {
                opacity: 1;
                visibility: visible;
              }
            }
          }

          .isClose {
            -webkit-animation: fade-out 0.3s ease-out both;
            animation: fade-out 0.3s ease-out both;

            @-webkit-keyframes fade-out {
              0% {
                opacity: 1;
              }

              100% {
                opacity: 0;
              }
            }

            @keyframes fade-out {
              0% {
                opacity: 1;
              }

              100% {
                opacity: 0;
                visibility: hidden;
              }
            }
          }
        }

        .selectItem:last-child {
          margin-right: 0px;
        }
      }
    }

    .count {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;

      span {
        color: #01f5ab;
      }
    }

    .productsContent {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;

      .productItem {
        background-image: url("../../../../../assets/images/mail/albumBg.png");
        background-size: 100% 100%;
        width: 282px;
        height: 402px;
        margin-bottom: 24px;
        cursor: pointer;

        .productImage {
          width: 276px;
          height: 276px;
        }

        .productDesc {
          padding: 20px 15px;

          .productTitle {
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: 52px;
          }

          .folder {
            display: flex;
            align-items: center;
            margin-top: 15px;

            img {
              width: 14px;
              height: 13px;
              margin-right: 6px;
            }

            p {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
    }

    .pcPage {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 28px;
      margin-bottom: 60px;

      /deep/ .el-pagination__total {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      /deep/ .el-input__inner {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: #2b2c2d;
        border: none;
        cursor: default;
        padding: 0;
      }

      /deep/ .el-pagination .btn-prev {
        background: #2b2c2d;
        color: #bbbfc3;
        margin-right: 10px;
        padding: 0;
      }

      /deep/ .el-pagination .btn-next {
        background: #2b2c2d;
        color: #bbbfc3;
        padding: 0;
      }

      /deep/ .el-pagination__jump {
        color: #fff !important;
      }

      .el-pagination .btn-prev:hover {
        color: #00ffb0 !important;
      }

      .el-pagination .btn-next:hover {
        color: #00ffb0 !important;
      }

      /deep/ .el-pager li {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #2b2c2d;
        margin-right: 10px;
        padding: 0;
      }

      /deep/ .el-pager li:hover {
        color: #00ffb0 !important;
      }

      /deep/ .el-pager li.active {
        color: #1e2020 !important;
        cursor: default;
        background: #00ffb0 !important;
      }
    }
  }

  .phone {
    display: none;
  }

  .noneTip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .deafultImage {
      width: 430px;
    }

    p {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
}

@media screen and (max-width: 768px) {
  .album {
    padding: 20px 30px 62px 30px;

    .pc {
      display: none;
    }

    .phone {
      display: block;

      .phoneSelect {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 49px;
        position: relative;

        .tabSelect {
          display: flex;
          align-items: center;

          .tabTitle {
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            opacity: 0.4;
            margin-right: 48px;
            display: flex;
            justify-content: center;
          }

          .isSelect {
            font-size: 36px;
            opacity: 1;
            font-weight: bold;
            position: relative;
            text-align: center;

            span {
              position: inherit;
              z-index: 1;
            }

            .backLine {
              width: 32px;
              height: 8px;
              background: #00ffb0;
              position: absolute;
              left: 20px;
              bottom: -15px;
            }
          }

          .tabTitle:last-child {
            margin-right: 0px;
          }
        }

        .downSelect {
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 18px 14px;
          position: absolute;
          top: -20px;
          right: 0;
          z-index: 999;

          .currentSelect {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .sortName {
              font-size: 28px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #0b81ef;
              margin-right: 24px;
            }

            .sortImage {
              width: 18px;
              height: 9px;
            }

            .upSort {
              -webkit-animation: rotate-center-up 0.3s ease-in-out both;
              animation: rotate-center-up 0.3s ease-in-out both;

              @-webkit-keyframes rotate-center-up {
                0% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }

                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }

              @keyframes rotate-center-up {
                0% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }

                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }
            }

            .downSort {
              -webkit-animation: rotate-center 0.3s ease-in-out both;
              animation: rotate-center 0.3s ease-in-out both;

              @-webkit-keyframes rotate-center {
                0% {
                  -webkit-transform: rotate(0);
                  transform: rotate(0);
                }

                100% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
              }

              @keyframes rotate-center {
                0% {
                  -webkit-transform: rotate(0);
                  transform: rotate(0);
                }

                100% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
              }
            }
          }

          .selectGroup {
            display: none;

            .selectItem {
              margin-top: 35px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              p {
                font-size: 26px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #484848;
              }

              .isSelect {
                color: #0b81ef;
              }

              .rightIcon {
                width: 18px;
                height: 13px;
              }
            }
          }

          .isShowGroup {
            display: block;
          }
        }

        .borderColor {
          border: 1px solid #ebebeb;
        }
      }

      .phoneOption {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        z-index: 1;
        overflow-x: auto;

        .phoneButton {
          margin: 0;
          padding: 12px;
          height: 52px;
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          margin-bottom: 40px;
          margin-right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;

          p {
            color: #ffffff;
            font-weight: 400;
            font-size: 28px;
            white-space: nowrap;
          }
        }

        .isClick {
          background: #00ffb0;

          p {
            color: #1c1e1e;
          }
        }
      }

      .phoneOption::-webkit-scrollbar {
        display: none;
      }

      .phoneProducts {
        display: block;
        // align-items: center;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 122px;

        .productGroup {
          align-items: center;
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;
          padding: 0 2px;

          .productItem {
            background: url("../../../../../assets/images/mobile/albumBg.png");
            background-size: 100% 100%;
            width: 332px;
            height: 500px;
            margin-right: 0;
            box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            margin-bottom: 26px;

            .productImages {
              height: 100%;
              position: relative;

              img {
                width: 324px;
                height: 324px;
                box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
              }
            }

            .productDesc {
              padding: 16px 20px 28px 20px;

              .productTitle {
                margin-bottom: 24px;
                line-height: 36px;
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                min-height: 72px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }

              .productText {
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8e8f8f;
              }
            }
          }
        }

        .productEnd {
          margin: 20px auto;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .noneTip {
      min-height: 60vh;

      p {
        margin-top: 50px;
        font-size: 22px;
      }
    }
  }
}
</style>
